<template>
	<view>
		<view class="banmi_flex">
			<view class="banmi_flex">
				<button @click="init(index)" class="top-but" v-for="(item,index) in top_list" :key="index">
					<text class="c-7 f-14" :class="tabindex==index? 'key_select' : ''">{{item.name}}</text>
				</button>
			</view>
		</view>
		<view>
			<uni-card>
				<view class="banmi_flex a-c p-b-10">
					<view class="" style="width: 40%;">
						<uni-easyinput v-model="search_key" placeholder="请输入关键字">
						</uni-easyinput>
					</view>
					<view class="banmi_flex m-l-10 ">
						<button @click="on_search(0)" type="primary" size="mini">查询</button>
						<button @click="on_search(1)" class="m-l-10" type="warn" size="mini">重置</button>
						<button @click="on_reply_add" class="m-l-10" type="primary" size="mini">添加</button>
					</view>
				</view>
				<uni-table border stripe type="selection" :type="'2'" style="width: 90%;"
					@selection-change="selectionData">
					<uni-tr>
						<uni-th align="center">id</uni-th>
						<uni-th align="center">关键字</uni-th>
						<uni-th align="center">类型</uni-th>
						<uni-th align="center">回复的内容</uni-th>
						<uni-th align="center">添加时间</uni-th>
						<uni-th align="center">是否启用</uni-th>
						<uni-th align="center">管理</uni-th>
					</uni-tr>
					<uni-tr v-for="(vo,index) in reply_list" :key="index">
						<uni-td align="center" style="height: 200rpx;">
							{{vo.id}}
						</uni-td>
						<uni-td>
							<view v-if="vo.event==0" class="banmi_flex j-c">
								{{vo.key}}
							</view>
							<view v-if="vo.event==1" class="banmi_flex j-c cred">
								{{vo.key}}
							</view>
							<view v-if="vo.event==2" class="banmi_flex j-c " style="color: #1E90FF;">
								{{vo.key}}
							</view>
						</uni-td>
						<uni-td align="center">
							{{vo.type=='text'? ' 文字':
												vo.type=='image'? ' 图片':
												vo.type=='video'? ' 视频':
												vo.type=='music'? ' 音乐':
												vo.type=='news'? '链接图文':
												vo.type=='voice'? ' 语音':
												vo.type=='applets'? ' 小程序': 
												'' }}
						</uni-td>
						<uni-td v-if="vo.type=='text'" align="center">
							{{vo.content}}
						</uni-td>
						<uni-td v-if="vo.type=='applets'">
							<view class="banmi_flex p-10">
								<view class="">
									<view class="banmi_flex ">
										<view class="f28 c_7" style="width: 50px;">标题 : </view>
										<text class="f28 ml1">{{vo.content.title}}</text>
									</view>
									<view class="banmi_flex pt1">
										<view class="f28 c_7" style="width: 50px;">跳转页 : </view>
										<text class="f28 ml1">{{vo.content.miniprogram}}</text>
									</view>
									<view class="banmi_flex pt1">
										<view class="f28 c_7" style="width: 50px;">appid : </view>
										<text class="f28 ml1">{{vo.content.appid}}</text>
									</view>
									<view class="pt1" v-if="vo.content.img_url">
										<image style="width: 80px;height: 80px;" :src="vo.content.img_url">
										</image>
									</view>
								</view>
							</view>
						</uni-td>
						<uni-td v-if="vo.type=='news'">
							<view class="banmi_flex  p-10">
								<view class="">
									<view class="banmi_flex ">
										<view class="f28 c_7" style="width: 50px;">标题 : </view>
										<text class="f28 ml1">{{vo.content.title}}</text>
									</view>
									<view class="banmi_flex pt1">
										<view class="f28 c_7" style="width: 50px;">描述 : </view>
										<text class="f28 ml1">{{vo.content.description}}</text>
									</view>
									<view class="banmi_flex pt1">
										<view class="f28 c_7" style="width: 50px;">跳转页 : </view>
										<text class="f28 ml1">{{vo.content.url}}</text>
									</view>

									<view class="pt1" v-if="vo.content.picurl">
										<image style="width: 80px;height: 80px;" :src="vo.content.picurl">
										</image>
									</view>
								</view>
							</view>
						</uni-td>

						<uni-td v-if="vo.type=='image'">
							<view class="banmi_flex  p-10">
								<image :src="vo.url" style="width: 80px;height: 80px;">
								</image>
							</view>
						</uni-td>
						<uni-td v-if="vo.type=='music'">
							<view class="banmi_flex j-c">
								<image src="@/static/play.png" style="width: 80px;height: 80px;">
								</image>
							</view>
						</uni-td>
						<uni-td v-if="vo.type=='voice'">
							<view class="banmi_flex j-c">
								<image src="@/static/play.png" style="width: 80px;height: 80px;">
								</image>
							</view>
						</uni-td>
						<uni-td v-if="vo.type=='video'">
							<view class="banmi_flex j-c">
								<video :controls="false" :show-fullscreen-btn="false" style="width: 80px;height: 80px;"
									:show-center-play-btn="false" :show-play-btn="false" :id="'videoId'+index"
									@play="play(index)" @fullscreenchange="fullscreenchange" :src="vo.content.url">
								</video>
							</view>
						</uni-td>
						<uni-td align="center">
							{{vo.create_time|getTime}}
						</uni-td>
						<uni-td>
							<view class="banmi_flex j-c" @click="on_state(index)">
								<view class="banmi_flex a-c  " :class="vo.state==0 ? '' : 'j-f'"
									style="width: 55px;height: 30px;border: solid #ccc 2rpx;border-radius: 25px;">
									<view v-if="vo.state==0" class=""
										style="background-color: #ccc;width: 30px;height: 30px;border-radius: 96rpx;">
									</view>
									<view v-if="vo.state==1" class=""
										style="background-color: #1E90FF;width: 30px;height: 30px;border-radius: 96rpx;">
									</view>
								</view>
							</view>
						</uni-td>
						<uni-td align="center">
							<button @click="on_dels(index)" type="primary" size="mini">删除</button>
						</uni-td>
					</uni-tr>
				</uni-table>
				<template v-slot:actions>
					<view style="width: 100%;">
						<uni-pagination @change="getPage" show-icon="true" :total="total" current="1"
							style="float: left;margin-bottom: 10px;">
						</uni-pagination>
					</view>
				</template>
			</uni-card>
		</view>
		<ReplyAdd ref="component_ReplyAdd" @confirm="confirm_ReplyAdd">
		</ReplyAdd>
	</view>
</template>

<script>
	import ReplyAdd from './reply_add.vue';
	export default {
		components: {
			ReplyAdd
		},
		data() {
			return {
				codetime: 8,
				find: {},
				name: '',
				keya: '',
				reply_list: [],
				total: 0,
				is_add: false,
				title: 'Hello',
				tabindex: 0,
				nav_index: 0,
				key: '',
				search_key: '',
				top_list: [{
						name: '关键字自动回复'
					},
					{
						name: '用户关注时回复'
					},
					{
						name: '默认回复'
					}
				]
			};
		},
		mounted() {
			this.init(0);
		},
		methods: {
			on_reply_add() {
				this.$refs.component_ReplyAdd.init(this.tabindex)
			},
			confirm_ReplyAdd() {
				this.init(0);
			},
			async on_state(index) {
				if (this.reply_list[index]['state'] == 0) {
					this.reply_list[index]['state'] = 1;
				} else {
					this.reply_list[index]['state'] = 0;
				}
				let requestParams = {
					state: this.reply_list[index]['state'],
					id: this.reply_list[index]['id']
				};
				const ret = await this.Banmikeji.Wechatsreply_reply_state(requestParams);
				uni.showToast({
					title: ret.msg,
					icon: 'none'
				})
			},
			on_dels(index) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确认删除吗？',
					success: function(res) {
						if (res.confirm) {
							that.on_delsajax(index);
						}
					}
				});
			},
			async on_delsajax(index) {
				var that = this;
				var id = this.reply_list[index]['id'];
				let requestParams = {
					id: id
				};
				const ret = await this.Banmikeji.Wechatsreply_reply_del(requestParams);
				uni.showToast({
					title: ret.msg,
					icon: 'none'
				})
				if (ret.status == 200) {
					that.reply_list = that.reply_list.filter(t => t.id != id);
				}
			},
			_add_reply() {
				this.init(this.tabindex);
				this.is_add = false;
			},
			on_search(id) {
				if (id == 1) {
					this.search_key = '';
				}
				this.init(this.tabindex);
			},
			async init(index) {
				this.is_add = false;
				this.tabindex = index;
				let requestParams = {
					event: index,
					search_key: this.search_key
				};
				const ret = await this.Banmikeji.Wechatsreply_reply_list(requestParams);
				this.reply_list = ret.data.data;
				this.total = ret.data.total;
			},
		}
	}
</script>

<style lang="scss">
	button::after {
		border: none;
	}



	.key_select {
		color: #1E90FF !important;
	}





	.top-but {
		background-color: transparent;
		border-style: none;
		border-color: transparent;
	}
</style>